import React, { ReactNode } from 'react';
import { motion } from 'framer-motion';
import { Card, Typography, Space } from 'antd';
import './index.css';
import {useSettings} from "@/hooks/web/useSettings.ts";

interface PageContainerProps {
    title: string;
    children: ReactNode;
    extra?: ReactNode;
    loading?: boolean;
    className?: string;
}

const PageContainer = ({
    title,
    children,
    extra,
    loading = false,
    className = '',
}: PageContainerProps) => {
    const { locale, theme, fontSize, changeFontSize } = useSettings();
    return (
        <motion.div
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.3 }}
            className={`h-full ${className}`}
        >
            <Card
                title={
                    <div className="flex items-center justify-between">
                        <Typography.Title level={4} style={{ margin: 0 }}>
                            {title}
                        </Typography.Title>
                        {extra && <Space>{extra}</Space>}
                    </div>
                }
                variant="borderless"
                className="page-card"
                loading={loading}
            >
                {children}
            </Card>
        </motion.div>
    );
};

export default PageContainer;
